<template>
  <div class style="height: 100%;padding: 20px;">
    <div :id="uniqueID" style="height: 100%;width: 100%;"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import uuidv1 from "uuid/v1";

import defaultmixins from "@/mixins/bigScreen/defaultmixins";
import axios from "@/utils/requestzz";;

export default {
  components: {},
  name: "chartlinechartquanwang",
  mixins: [defaultmixins],
  components: {},
  data() {
    return {
      uniqueID: "",
      myChart: "",
      options: "",
      markLineData: ""
    };
  },
  computed: {},
  watch: {
    "$store.state.daping.bigScreen": {
      handler: function(n, o) {
        let n_tmp = n;
        let g_bigscreen_data_arr = n_tmp.filter(item => {
          if (item.attrName == "echart_plan_heat") {
            return true;
          }
        });
        this.markLineData = g_bigscreen_data_arr[0].attrValue;
      }
    },

    "$store.state.daping.queryDbPipenetColSa_003qc": {
      handler: function(n, o) {
        this.loadData(n);
      }
    }
  },
  created() {
    this.uniqueID = uuidv1();
  },
  mounted() {
    var myChart = echarts.init(document.getElementById(this.uniqueID));
    //供热面积环状图

    var scale = this.$root.setting.scale;

    var color = "#F5F5F5";

    var option = {};

    myChart.setOption(option);
    window.addEventListener("resize", () => {
      myChart.resize();
    });
    this.myChart = myChart;
    this.options = option;

    // setInterval(() => {
    //   this.loadData();
    // }, 5000);
  },
  methods: {
    loadData(queryDbPipenetColSa_003qc) {
      let _this = this;

      var scale = this.$root.setting.scale;

      var g_his_stime = 1579104000000; //2020.01.16 13:01:00
      var g_his_etime = 1579190399999; //2020.01.16 13:06:00 13:05:00有一条数据

      let seriesData = [];
      let markLineSeriesData = [];
      //如果有则获取200中的结果
      var pipenetData = queryDbPipenetColSa_003qc;
      var markLineData = this.markLineData
      for (var i in pipenetData) {
        // xData.push(pipenetData[i]["aligntime"].substring(5, pipenetData[i]["aligntime"].length - 3));
        // yData.push(Number(pipenetData[i]["value"] / 3.6).toFixed(0));
        if (pipenetData[i]["value"] || pipenetData[i]["value"] == 0) {
          seriesData.push([
            pipenetData[i]["aligntime"],
            Number(pipenetData[i]["value"] / 3.6).toFixed(0)
          ]);
        }
        // markLineSeriesData.push([pipenetData[i]["aligntime"], markLineData]);
      }

      this.options = {
        title: {
          text: "全网供热量(MW)",
          textStyle: {
            color: "#fff",
            fontSize: 36 * scale,
            fontWeight: "bold"
          }
        },
        tooltip: {
          show: true,
          trigger: "axis",
          // formatter: "{a} {b}: {c} MW",
          formatter: (params, ticket, callback) => {
            //【2019年11月21日】把markline的数据也放上去 显示差值
            var html =
              params[0].axisValueLabel +
              "<br>" +
              params[0].marker +
              params[0].seriesName +
              " : " +
              params[0].value[1];
            if (markLineData) {
              html +=
                "<br>" +
                params[0].marker +
                "买热量 : " +
                markLineData +
                "<br>" +
                params[0].marker +
                "差值:" +
                (params[0].value[1] - markLineData);
            }
            return html;
          },
          textStyle: {
            fontWeight: "normal",
            fontSize: 30 * scale
          }
        },
        grid: {
          //统计图距离边缘的距离
          bottom: "10%",
          top: "20%",
          left: "5%",
          right: "5%",
          containLabel: true
        },
        xAxis: [
          {
            //x轴
            type: "time", //数据类型为不连续数据category
            boundaryGap: false, //坐标轴两边是否留白
            minInterval: 3600 * 1 * 1000,
            axisLine: {
              //坐标轴轴线相关设置。数学上的x轴
              show: true,
              lineStyle: {
                color: "#F5F5F5" //x轴颜色
              }
            },
            axisLabel: {
              //坐标轴刻度标签的相关设置
              textStyle: {
                color: "#F5F5F5",
                fontSize: 30 * scale
              },
              formatter: function(value, index) {
                // 格式化成分:秒，只在0点刻度显示日期和时间
                var date = new Date(value);
                var hour = date.getHours();
                var minute = date.getMinutes();

                hour = hour < 10 ? "0" + hour : hour;
                minute = minute < 10 ? "0" + minute : minute;

                if (hour == "00" && minute == "00") {
                  return (
                    date.getMonth() +
                    1 +
                    "-" +
                    date.getDate() +
                    " " +
                    hour +
                    ":" +
                    minute
                  ); //日期是getDate 星期几是getDay
                }
                return hour + ":" + minute;
              }
            },
            axisTick: {
              show: false
            }, //刻度点数轴
            splitLine: {
              show: false
            } //是否显示分隔线。默认数值轴显示，类目轴不显示。
            // data: xData,
          }
        ],
        yAxis: [
          {
            //y轴的相关设置
            type: "value", //y轴数据类型为连续的数据
            // name:"单位:MW",
            splitLine: {
              //y轴上的y轴线条相关设置
              show: false
            },
            axisLine: {
              //y轴的相关设置
              show: true,
              lineStyle: {
                color: "#F5F5F5" //y轴颜色
              }
            },
            axisLabel: {
              textStyle: {
                color: "#ffffff",
                fontSize: 30 * scale
              }
            },
            axisTick: {
              show: false
            }, //刻度点数轴
            max: markLineData
              ? Number(markLineData * 1.4).toFixed(0)
              : "dataMax"
          }
        ],
        series: [
          {
            name: "供热量",
            type: "line", //统计图类型为折线图
            smooth: true, //是否平滑曲线显示
            symbolSize: 0, //数据点的大小，[0,0]//b表示宽度和高度
            lineStyle: {
              //线条的相关设置
              normal: {
                color: "#E2D054" // 线条颜色
              }
            },
            itemStyle: {
              normal: {
                borderWidth: 5,
                color: "#E2D054" //tooltip里点的颜色
              }
            },
            markLine: {
              symbol: "none", //去掉警戒线最后面的箭头
              label: {
                fontSize: 20 * scale,
                position: "middle" //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                // formatter: '{a}: {c}',
              },
              data: [
                {
                  silent: false, //鼠标悬停事件  true没有，false有
                  lineStyle: {
                    //警戒线的样式  ，虚实  颜色
                    type: "solid",
                    color: "#E2D054",
                    width: 5
                  },
                  yAxis: markLineData //【2019年11月6日】从数据库读取
                }
              ]
            },
            areaStyle: {
              //区域填充样式
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(226,208,84,0.8)"
                    },
                    {
                      offset: 1,
                      color: "rgba(251,246,208,0.06)"
                    }
                  ],
                  false
                ),

                shadowColor: "rgba(226,208,84,0.8)", //阴影颜色
                shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              }
            },
            data: seriesData
          }
          // ,{
          //     name: '买热量',
          //     type: 'line',//统计图类型为折线图
          //     smooth: true, //是否平滑曲线显示
          //     symbolSize: 0,//数据点的大小，[0,0]//b表示宽度和高度
          //     lineStyle: {//线条的相关设置
          //         normal: {
          //             color: "#E2D054",   // 线条颜色
          //             width: 5,

          //         }
          //     },
          //     itemStyle: {
          //         normal: {
          //             borderWidth: 5,
          //             color: "#E2D054",//tooltip里点的颜色
          //         }
          //     },

          //     data: markLineSeriesData,
          // }
        ]
      };

      this.myChart.setOption(this.options);
    }
  }
};
</script>
<style lang='scss' scoped>
</style>